<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ会员首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index_qqVip.css"/>

</head>
<body>
<!--top     B-->
<div class="top">
    <div class="banxin">
        <a href="QQVIP_index.html"><img src="images/logo.png" height="90px"/></a>
        <ul class="ul">
            <li><a href="javascript:void(0)">功能特权</a></li>
            <li><a href="../games/games.html">游戏特权</a></li>
            <li><a href="../life&activity/life.html">生活特权</a></li>
            <li><a href="../decoration/decoration.html">装扮特权</a></li>
            <li><a href="../life&activity/activity.html">会员活动</a></li>
            <li><a href="javascript:void (0)">成长体系</a></li>
            <li><a href="javascript:void (0)">年份专区</a></li>
        </ul>
        <div class="nav">
            <div class="login">登 录</div>
            <div class="kaitong">
                <a href="#">开通超级会员</a>
            </div>
        </div>
    </div>
</div>
<!--top     E-->
<!--main    B-->
<div class="main">
    <div class="main_div" id="main_div">
        <ul id="main_ul">
            <li><a href="javascript:void (0)"><img src="images/1465812490_1180.png" alt="" width="800px"/></a></li>
            <li><a href="javascript:void (0)"><img src="images/1466750790_1180x600.png" alt="" width="800px"/></a></li>
            <li><a href="javascript:void (0)"><img src="images/1466480835_1180-600.png" alt="" width="800px"/></a></li>
            <li><a href="javascript:void (0)"><img src="images/1467084583_1180x600_(7).png" alt="" width="800px"/></a></li>
            <li><a href="javascript:void (0)"><img src="images/1466758829_1180600.png" alt="" width="800px"/></a></li>
        </ul>
    </div>
    <div class="arrow">
        <div id="left_arrow"></div>
        <div id="right_arrow"></div>
    </div>

</div>

<script src="animate.js"></script>
<script src="common.js"></script>
<script>
    //轮播图
    //找对象
    var right_arrow = my$("right_arrow")
    var left_arrow=my$("left_arrow")
    var main_div =my$("main_div")
    var ul =my$("main_ul")
    var index=0
    var imgWidth = main_div.offsetWidth
    var count=ul.children.length



    //点击箭头切换图片
    //   无缝滚动 把第一张图片对应的li克隆，追加到ul的最后
    var firstLi = ul.children[0];
    var cloneLi = firstLi.cloneNode(true);
    //追加到ul的最后
    ul.appendChild(cloneLi);
    //对右边箭头设置事件
    right_arrow.onclick= function () {
        if(index ===count-1) {
            index=0;
            ul.style.left = 0;
        }  index++;
        animate(ul, {"left":-index * imgWidth})
    }
    left_arrow.onclick= function () {
//        alert("hhh")
        if(index ===0) {
            index=count-1;
            ul.style.left = -index * imgWidth+ "px";
        }  index--;
        animate(ul, {"left":-index * imgWidth})
    }


</script>
<!--main    E-->
<!--ad      B-->
<div class="ad" id="ad">
    <div class="ad1" id="ad1">
        <h3>功能特权</h3>
        <span>超级会员 特权王者</span>
    </div>
    <div class="ad2" id="ad2">
        <h3>装扮特权</h3>
        <span>超级会员 我有我风采</span>
    </div>
    <div class="ad3" id="ad3">
        <h3>游戏特权</h3>
        <span>游戏礼包 抓鼠福利</span>
    </div>
    <div class="ad4" id="ad4">
        <h3>生活特权</h3>
        <span>超多优惠福利</span>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    //鼠标移动到上面，背景图向上移动
    //找到对象
    var ad =my$("ad")
    var ads =ad.getElementsByTagName("div")
    //遍历对象
    for(var i=0;i<ads.length;i++){
        var ad_a=ads[i]
        //当鼠标移动到上面时，背景图上移
        ad_a.onmouseover= function () {
            this.style.backgroundPosition="center -30px"
        }
        //鼠标离开时，恢复
        ad_a.onmouseout= function () {
            this.style.backgroundPosition="center"
        }
    }

</script>
<!--ad      E-->
<!--footer  B-->
<div class="footer" id="footer">
    <ul>
        <li><span class="span1"></span>官方手Q账号</li>
        <li><span class="span2"></span>官方微信账号</li>
        <li><span class="span3"></span>兑换中心</li>
        <li><span class="span4"></span>兴趣部落</li>
        <li><span class="span5"></span>官方空间</li>
        <li><span class="span6"></span>官方微博</li>
        <li><span class="span7"></span>客服中心</li>
    </ul>
    <div id="code_1"><div></div></div>
    <div id="code_2"><div></div></div>
</div>
<script>
    //改变精灵图位置，并显示隐藏二维码
    //找对象
    var footer =my$("footer")
    var spans =footer.getElementsByTagName("span")
    var code_1=my$("code_1")
    var code_2=my$("code_2")
    //注册事件
    //鼠标移动到上面时，改变精灵图位置
    for(var i=0;i<spans.length;i++){
        span=spans[i]
        span.onmouseover= function () {
            this.style.backgroundPositionX="-100px"
        }
        span.onmouseout= function () {
            this.style.backgroundPosition=""
        }
    }
    //显示隐藏二维码
    spans[0].onmouseenter= function () {
        code_1.style.display="block"
    }
    spans[0].onmouseleave= function () {
        code_1.style.display="none"
    }
    spans[1].onmouseenter= function () {
        code_2.style.display="block"
    }
    spans[1].onmouseleave= function () {
        code_2.style.display="none"
    }

</script>
<!--footer  E-->
<!--bottom  B-->
<div class="bottom">
    <span>Copyright &copy; 1998 - 2016 Tencent . All Rights Reserved</span><br/>
    <span>腾讯公司 版权所有</span>
</div>
<div class="wrapper" id="wrapper">
    <div class="wrapper_main">
        <div class="logo"></div>
        <div class="super">开通超级会员&gt;</div>
        <h3>开通特权王者,做特权王者</h3>
    </div>
</div>
<script>
    //当页面滚出距离大于一定值时，wrapper显示
    //找对象
    var wrapper=my$("wrapper")
    //注册事件   ，设置动画
    window.onscroll= function () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(scrollTop>150){
            animate(wrapper,{"bottom":0})
        }else{
            animate(wrapper,{"bottom":-137})
        }
    }
</script>
<!--bottom  E-->
</body>
</html>